<template>
  <div class="container-changePass">
          <el-form
            :model="resetPassForm"
            status-icon
            :rules="passRules"
            ref="ruleForm"
            label-width="100px"
          >
            <el-form-item label="新密码" prop="newPassWord">
              <el-input v-model="resetPassForm.newPassWord"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="surePassWord">
              <el-input v-model.number="resetPassForm.surePassWord"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="margin-left:20%" type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
</div>
</template>

<script>
import { encrypt } from '../../../utils/crypto'
export default {
  name: 'changePass',
  props: ['changeOption'],
  data () {
    var checkNewPassWord = (rule, value, callback) => {
      if (!/^[a-zA-Z0-9]{5,8}$/.test(value)) {
        return callback(new Error('密码为5-8位数字或者字母'))
      }
      callback()
    }
    var checkSurePassWord = (rule, value, callback) => {
      if (this.resetPassForm.surePassWord !== Number(this.resetPassForm.newPassWord)) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      resetPassForm: {
        newPassWord: '',
        surePassWord: ''
      },
      selectedUserId: '',
      passRules: {
        newPassWord: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: checkNewPassWord, trigger: 'blur' }
        ],
        surePassWord: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: checkSurePassWord, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    changeOption: function (newVal) {
      this.selectedUserId = newVal
    }
  },
  created () {
    this.selectedUserId = this.changeOption
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const encryptedPassword = encrypt(this.resetPassForm.newPassWord)
          const res = await this.$http({
            url: '/api/platApi/user/updatePassWord',
            method: 'get',
            params: {
              newPassWord: encryptedPassword,
              userId: this.selectedUserId
            }
          })
          if (res.status === 200 && res.data.code === 1) {
            this.$message({
              message: '修改密码成功',
              type: 'success'
            })
            this.$emit('closeChangeDialog')
            this.resetForm()
          } else {
            this.$message.error('修改密码失败')
            this.resetForm()
          }
        } else {
          return false
        }
      })
    },
    resetForm () {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style scoped lang='less'>
.el-form{
  margin-right: 40px;
}
</style>
